<template>
	<view class="recommendContainer">
		<!--轮播图-->
		<swiper class="banner" circular indicator-dots autoplay>
			<swiper-item><image src="https://yanxuan.nosdn.127.net/static-union/1656296234000030.jpg"></image></swiper-item>
			<swiper-item><image src="https://yanxuan.nosdn.127.net/static-union/1656043344c6f282.jpg"></image></swiper-item>
			<swiper-item><image src="https://yanxuan.nosdn.127.net/e327de854c733028d28c9c58e4f484d6.jpg"></image></swiper-item>
		</swiper>
		<!--政策信息-->
		<view class="policyDescList">
			<view class="policyDescItem"  v-for="(item,index) in initData.policyDescList" :key="item.index">
				<image :src="item.icon"></image>
				<text>{{item.desc}}</text>
			</view>
		</view>
		<!--导航菜单-->
		<view class="kingKongModule">
			<view class="kingKongItem" v-for="(k ,index) in initData.kingKongModule.kingKongList" :key="k.L1Id">
				<image :src="k.picUrl"></image>
				<text>{{k.text}}</text>
			</view>
		</view>
		<category/>
	</view>
</template>
<script>
	import category from '../category/category.vue'
	import {mapState} from 'vuex'
export default {
	name: 'recommend',
	components:{
		category
	},
	computed:{
		...mapState({
			initData:state=>state.indexData.initData
		})
	},
};
</script>
<style lang="stylus">
.recommendContainer
	.banner
		width 100%
		height 350rpx
		image
			width 100%
			height 100%
	.policyDescList
		display flex
		.policyDescItem
			flex 1
			text-align center
			image
				width 32rpx
				height 32rpx
				vertical-align middle
			text
				font-size 24rpx
				vertical-align middle
	.kingKongModule
		display flex
		flex-wrap wrap
		margin 20rpx 0
		.kingKongItem
			display flex
			flex-direction column
			align-items center
			width 20%
			image
				width 110rpx
				height 110rpx
			text
				font-size 26rpx
				line-height 30rpx
</style>
